import React, { Component } from 'react'
import { Chart } from '@/components/Chart';
import Label from '@/components/Label';
import { connect } from 'dva';

interface P {
  dispatch?: any;
  data?: {
    fireDay: Array<String>;
    fireQuantity: Array<Number>;
    fireTotal: Number;
    fireError: Number;
  }
}

@connect(({ home }) => ({
  data: home.fire || {}
}))
class Fire extends Component<P> {

  renderChart = (label, data) => {
    Chart({
      ref: this.refs.line,
      label,
      yAxis: {
        name: '数量',
        splitLine: {
          show: false
        }
      },
      xAxis: {
        name: '时间',
        splitLine: {
          show: false
        },
      },
      data: [{
        name: '火警',
        type: "line",
        data,
        color: '#ED7109',
        label: {
          show: true,
          position: 'top',
          color: '#ED7109'
        },
      }]
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'home/queryFire' }).then(() => {
      const { data } = this.props;
      const { fireDay, fireQuantity } = data;

      this.renderChart(Array.isArray(fireDay) ? fireDay.map(v => v.slice(5)) : [], fireQuantity)
    })

  }

  render() {

    const { data } = this.props;
    const { fireTotal, fireError } = data;

    return (
      <section style={{ height: '100%', width: '100%', padding: '3%', position: 'relative' }}>
        <Label color='#ED7109' value={`火警数${fireTotal || 0}起，其中误报${fireError || 0}起`}/>
        <div ref='line' style={{ width: '100%', height: '100%' }}></div>
      </section>
    )
  }
}

export default Fire;